<template>
    <div class = "rq">
        <el-container>
            <el-aside :width="widthww">
                <div style="background-color: white;">
                    <div style="width:190px; height:60px; overflow:hidden;">
                        <img @click="dhl_dx()" style="position: relative;z-index: 9999;width: 170px;height:170px;margin-left: -53px;margin-top: -50px" src="../assets/mylogo.png">
                        <img v-show="onelogo" src="../assets/fontlogo.png" style="width: 210px;height:210px;margin-top:-400px;margin-left:20px;position: relative;top:-30px">
                    </div>

                </div>
                <el-menu
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        :unique-opened="true"
                        :collapse="zksq"
                >
                    <el-submenu :index="String(ft.menusId)" v-for="ft in ftlist" :key="ft.menusId">
                        <template slot="title">
                            <i :class="ft.menusIcon"></i>
                            <span>{{ft.menusName}}</span>
                        </template>
                        <el-menu-item-group>
                            <router-link :to="fun.mePath" :key="fun.meId" v-for="fun in ft.chirmenulist">
                                <el-menu-item :index="String(fun.meId)">{{fun.meName}}</el-menu-item>
                            </router-link>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header style="height: 60px">
                    <div style="display: block;position: relative;top: 0px;background: #409EFF;z-index: 1213;width: 100%;color: white">
                        <div style="display: inline-block;margin-left:800px">
                            <span>{{ipEntity.date}}</span>
                            <span style="margin-left: 5px">{{ipEntity.week}}</span>
                            <span id="citys"><i class="el-icon-location-information"></i>{{ipEntity.city}}</span>
                            <span style="margin-left: 5px">{{ipEntity.tem}}℃ </span>
                            <span style="margin-left: 5px">{{ipEntity.wea}}</span>

                            <div style="display: inline-block;margin-left: 20px" @click="handleFullScreen" >
                                <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom">
                                    <i class="el-icon-rank"></i>
                                </el-tooltip>
                            </div>
                            <span style="margin-left: 20px"><i class="el-icon-bell"></i></span>

                            <span style="margin-left: 30px">{{empName}}</span>
                        </div>
                        <div style="display: inline-block;width: 140px;border-radius: 4px;position: fixed;right:0px">
                            <div style="border-radius: 50%;display: inline-block;margin-left: 60px;
                                        width:50px; height:50px; overflow:hidden;margin-top: 4px">
                                <img :src="myimage" style="width: 60px;height: 60px" @click="djpeople" @blur="djpeople">
                            </div>
                        </div>
                    </div>
                    <div id="people" v-show="onepeople">
                        <ul style="list-style: none" id="oneul">
                            <li  @click="myemp()">
                                个人资料
                            </li>
                            <li @click="quit()">
                                退出
                            </li>

                        </ul>
                    </div>

                </el-header>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "ZhuYe",
        data() {
            return {
                myimage:'',//头像

                fullscreen: false,

                onelogo:true,
                onepeople:false,
                aa:1,
                widthww:'200px',
                ftlist:[],
                activeIndex: '1',
                activeIndex2: '1',
                zksq:false,
                ipEntity:{
                    city:'',
                    date:'',
                    week:'',
                    wea:'',
                    tem:''
                },
                empName:''
            };
        },
        methods: {

            myemp(){
                this.onepeople = !this.onepeople;
                this.$router.push({
                    path: "/dmypersonal",
                });
            },

            handleFullScreen(){
                let element = document.documentElement;
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
            },
            init(){
                this.$axios.post("http://localhost:8088/come/fun").then(v=>{

                    if(v.data.myfun.length==0){
                        this.$router.push({
                            path: "/login",
                        });
                    }else {
                        this.ftlist=v.data.myfun;
                        var storage = window.localStorage;
                        this.ipEntity = JSON.parse(storage.getItem('city'));
                        this.empName = JSON.parse(storage.getItem('user')).empName;
                        storage.setItem("mybutton",JSON.stringify(v.data.mybutton));/*存储按钮标识符*/
                        this.print("mybutton");
                        this.print(JSON.stringify(v.data.mybutton));
                        this.myimage = storage.getItem('imgpath');
                    }

                }).catch(()=>{

                })
            },
            dhl_dx(){
                this.onelogo = !this.onelogo;
                this.zksq=!this.zksq;
                if(this.aa%2==0){
                    this.widthww = '200px';
                }else {
                    this.widthww = '65px';
                }
                this.aa++;

            },
            handleSelect(key, keyPath) {
                window.console.log(key, keyPath);
            },handleOpen(key, keyPath) {
                window.console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                window.console.log(key, keyPath);
            },
            djpeople(){
                this.onepeople=!this.onepeople;
            },
            quit(){
                this.$confirm('是否退出系统?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("http://localhost:8088/come/romovesession").then(()=>{


                        var _this = this;
                        _this.$store.commit('loginOut',_this.$store.state);
                       /*// _this.$store.commit('resetRouter','');*/
                        this.$router.push({
                            path: "/login",
                        });
                        //location.reload();
                    }).catch(()=>{

                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出'
                    });
                });
            }
        },
        created() {
            this.init();
        }
    }

</script>


<style scoped>

    #citys{
        cursor:pointer;
        margin-left: 10px
    }

    #people{
        background-color: white;
        box-shadow:#ccc 0px 0px 10px;
        position: relative;
        z-index: 99999;
        width: 150px;height:100px;
        float: right;
        margin-right:30px;
    }
    #oneul li{
        margin-top: 15px;
        height: 30px;
        line-height: 30px;
        width: 130px;
        margin-left: -30px;
        border-radius: 2px;
        text-indent:15px;
    }
    #oneul li:hover{
        cursor:pointer;
        background-color: #F5F5F5;
    }
    .dhl_tb{
        color:azure;
        position: fixed;
        top:93%;
        border: 1px solid red;
        width: 30px;
        height: 30px;
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
        padding: 0px;
    }

    .el-main {
        background-color: #f5f6f9;
        color: #333;
        padding-top: 10px    ;
        padding-left: 20px;
    }

    body > .el-container {
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .rq{
        height: 100%;
    }

    .logo{
        border-bottom: 2px solid #E6E6E6;
        height: 60px;
        background: white;
    }
    el-menu-item{
        width: 100%;
    }
    a{
        text-decoration: none;
        color: white;
    }
    .two{

    }
    .el-aside {
        line-height: 50px;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
        position: fixed;
        top: 60px;
        bottom: 0;
        left: 0;
        overflow-x: hidden;
        overflow-y: auto;
    &::-webkit-scrollbar {
         display: none;
     }
    }
</style>